<script setup lang="ts">
import { ref } from 'vue';

const searchFormData = ref({ name: '', status: null })
const layout = ref('inline')

const emits = defineEmits(['onResetEmit', 'onSubmitEmit'])

const onReset = () => {
  searchFormData.value = { name: '', status: null }
  emits('onResetEmit', searchFormData.value)
}

const onSubmit = () => {
  // searchFormData.value = { name: searchFormData.value.name, status: searchFormData.value.status };
  emits('onSubmitEmit', searchFormData.value)
}
const statusList = ref([
  { 'label': '启用', value: 1 },
  { 'label': '禁用', value: 0 }
])
</script>

<template>
  <t-space direction="vertical" size="large">

    <t-form ref="searchForm" :data="searchFormData" label-width="calc(2em + 24px)" :layout="layout"
            scroll-to-first-error="smooth" @reset="onReset" @submit="onSubmit">
      <t-form-item label="项目名称" name="name">
        <t-input v-model="searchFormData.name"></t-input>
      </t-form-item>

      <t-form-item label="状态" name="status">
        <t-select autoWidth v-model="searchFormData.status">
          <t-option v-for="status in statusList" :label="status.label" :value="status.value"
                    :key="status.value"></t-option>
        </t-select>
      </t-form-item>

      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">提交</t-button>
          <t-button theme="default" variant="base" type="reset">重置</t-button>
        </t-space>
      </t-form-item>

    </t-form>
  </t-space>
</template>
